<template>
  <div class="EosResources">
    <ul>
      <li class="balanceList">
        <el-popover
          placement="bottom"
          trigger="hover">
          <div v-if="totalResources && totalResources.total_resources">
            {{$t('myWallet.used')}}{{ usedCpu }} / {{$t('myWallet.total')}}{{ totalCpu }}
            ({{totalResources.total_resources.cpu_weight}})
          </div>
          <div slot="reference" class="cpuContent">
            <i class="tag" :class="cpuAddBack"></i>
            <div class="inblo" :class="cpuAddColor">
              <span class="cpuName">CPU</span>
              <span class="surplus">
                {{$t('myWallet.used')}}
                <span v-if="totalResources">{{ cpuPercent || '0%' }}</span>
                <span v-else><i class="el-icon-refresh el-icon-loading"></i></span>
              </span>
            </div>
          </div>
        </el-popover>
        <span class="jumpBtn" @click="handleToCpu"
        v-if="chain === 'eos' && wallet === 'Scatter'">{{$t('myWallet.buyOrSellCpu')}}</span>
      </li>
      <li class="balanceList">
        <el-popover
          placement="bottom"
          trigger="hover">
          <div v-if="totalResources && totalResources.total_resources">
            {{$t('myWallet.used')}}{{ usedNet }} / {{$t('myWallet.total')}}{{ totalNet }}
            ({{ totalResources.total_resources.net_weight }})
          </div>
          <div slot="reference" class="cpuContent">
            <i class="tag" :class="netAddBack"></i>
            <div class="inblo" :class="netAddColor">
              <span class="cpuName">NET</span>
              <span class="surplus">
                {{$t('myWallet.used')}}
                <span v-if="totalResources">{{ netPercent || '0%' }}</span>
                <span v-else><i class="el-icon-refresh el-icon-loading"></i></span>
              </span>
            </div>
          </div>
        </el-popover>
        <span v-if="chain === 'eos' && wallet === 'Scatter'"
        class="jumpBtn" @click="handleToNet">{{$t('myWallet.buyOrSellNet')}}</span>
      </li>
      <li class="balanceList">
        <el-popover
          placement="bottom"
          trigger="hover">
          <div v-if="totalResources">{{$t('myWallet.used')}}{{ usedRam }} / {{$t('myWallet.total')}}{{ totalRam }}</div>
          <div slot="reference" class="cpuContent">
            <i class="tag"></i>
            <div class="inblo">
              <span class="cpuName">RAM</span>
              <span class="surplus">
                {{$t('myWallet.remain')}}
                <span v-if="totalResources">{{ ramBalance || '0.00MB' }}</span>
                <span v-else><i class="el-icon-refresh el-icon-loading"></i></span>
              </span>
            </div>
          </div>
        </el-popover>
        <span v-if="chain === 'eos' && wallet === 'Scatter'"
        class="jumpBtn" @click="handleToRam">{{$t('myWallet.buyOrSellRam')}}</span>
      </li>
    </ul>
    <!-- cpu dialog -->
    <el-dialog
      :visible.sync="cpuVisible"
      width="636px"
      center
      :close-on-click-modal="false">
      <cpu
        :eos-balance="eosBalance"
        :total-resources="totalResources"
        :symbol-science="symbolScience"
        @listenGetAccount="handleGetInfo"/>
    </el-dialog>

    <!-- net dialog -->
    <el-dialog
      :visible.sync="netVisible"
      width="636px"
      center
      :close-on-click-modal="false">
      <net
        :eos-balance="eosBalance"
        :total-resources="totalResources"
        :symbol-science="symbolScience"
        @listenGetAccount="handleGetInfo"/>
    </el-dialog>
  </div>
</template>

<script>
// 公用js
import Cpu from '@/views/myWallet/eosResource/Cpu';
import Net from '@/views/myWallet/eosResource/Net';
import { toFixed, toNonExponential } from '@/utils/validate';  // eslint-disable-line

export default {
  name: 'EosResources', // eos资源
  data() {
    return {
      totalResources: null, // account 信息
      cpuAddColor: '', // cou余额不同显示颜色
      netAddColor: '', // net余额不同显示颜色
      cpuAddBack: 'greenBack', // cpu余额icon颜色
      netAddBack: 'greenBack', // net余额icon颜色
      ramBalance: '', // ram余额
      usedRam: '', // ram使用量
      totalRam: '', // ram总量
      usedCpu: '', // cpu使用量
      totalCpu: '', // cpu总量
      usedNet: '', // net使用量
      totalNet: '', // net总量
      cpuPercent: '', // cpu用的百分比
      netPercent: '', // net用的百分比
      cpuVisible: false, // 显示cpu弹窗
      netVisible: false, // 显示net弹窗
      chain: 'eos',
      wallet: '',
      eosBalance: '',
    }
  },
  components: {
    Cpu, // cpu页面
    Net, // net页面
  },
  props: {
    symbolScience: {
      type: String,
      default: 'EOS'
    },
  },
  watch: {
    '$store.state.app.scatter.wallet': function change(val) {
      this.wallet = val;
      if (val) {
        this.handleGetInfo();
      }
    },
    '$store.state.app.accountRes': function change() {
      this.handleGetInfo();
    },
  },
  computed: {},
  created() {},
  mounted() {
    const sapp = this.$store.state.app;
    const scat = sapp.scatter;
    this.chain = scat.chain || 'eos';
    this.wallet = scat.wallet;
  },
  beforeDestroy() {},
  methods: {
    // 获取账户信息
    handleGetInfo() {
      if (!this.$store.state.app.accountRes) return;
      const res = this.$store.state.app.accountRes;
      let cpuPercent = 100;
      if (res.cpu.max) {
        cpuPercent = toFixed(toNonExponential((res.cpu.used / res.cpu.max) * 100), 1);
      }
      let netPercent = 100;
      if (res.net.max) {
        netPercent = toFixed(toNonExponential((res.net.used / res.net.max) * 100), 1);
      }
      const ramBalance = res.ram.max - res.ram.used;
      const usedRam = res.ram.used;
      const totalRam = res.ram.max;
      const usedCpu = res.cpu.used;
      const totalCpu = res.cpu.max;
      const usedNet = res.net.used;
      const totalNet = res.net.max;
      this.cpuPercent = `${cpuPercent}%`;
      this.netPercent = `${netPercent}%`;
      this.eosBalance = '0.0000 EOS';
      if (res.balance) {
        this.eosBalance = res.balance;
      }
      if (!res.refund_request.net_amount && !res.refund_request.cpu_amount) {
        res.refund = toFixed(0, 4);
      }
      if (res.refund_request.net_amount || res.refund_request.cpu_amount) {
        const refund = parseFloat(res.refund_request.net_amount) + parseFloat(res.refund_request.cpu_amount);
        res.refund = toFixed(refund, 4);
      }
      if (!res.total_resources.cpu_weight && !res.total_resources.cpu_weight) {
        res.total_resources = {
          cpu_weight: '0.0000 EOS',
          net_weight: '0.0000 EOS'
        };
      }
      if (!res.self_delegated_bandwidth.cpu_weight && !res.self_delegated_bandwidth.cpu_weight) {
        res.self_delegated_bandwidth = {
          cpu_weight: '0.0000 EOS',
          net_weight: '0.0000 EOS'
        };
      }
      if (cpuPercent < 60) {
        this.cpuAddBack = 'greenBack';
      } else if (cpuPercent >= 60 && cpuPercent <= 80) {
        this.cpuAddBack = 'orangeBack';
      } else {
        this.cpuAddColor = 'redColor';
        this.cpuAddBack = 'redBack';
      }
      if (netPercent < 60) {
        this.netAddBack = 'greenBack';
      } else if (netPercent >= 60 && netPercent <= 80) {
        this.netAddBack = 'orangeBack';
      } else {
        this.netAddColor = 'redColor';
        this.netAddBack = 'redBack';
      }
      this.handleFlow(ramBalance, 'ramBalance');
      this.handleFlow(totalNet, 'totalNet');
      this.handleFlow(usedNet, 'usedNet');
      this.handleFlow(totalRam, 'totalRam');
      this.handleFlow(usedRam, 'usedRam');
      this.handleCpuconver(usedCpu, 'usedCpu');
      this.handleCpuconver(totalCpu, 'totalCpu');
      this.totalResources = res;
    },
    // 流量转化
    handleFlow(flowVal, flowString) {
      let flow = '';
      if (flowVal > 1024 && flowVal < 1048576) {
        flow = `${this.handleToFixed(flowVal / 1024, 2)}KB`;
      } else if (flowVal >= 1048576) {
        flow = `${this.handleToFixed(flowVal / 1048579, 2)}MB`;
      } else {
        flow = `${flowVal}B`;
      }
      if (flowString === 'totalNet') {
        this.totalNet = flow;
      } else if (flowString === 'usedNet') {
        this.usedNet = flow;
      } else if (flowString === 'totalRam') {
        this.totalRam = flow;
      } else if (flowString === 'ramBalance') {
        this.ramBalance = flow;
      } else if (flowString === 'usedRam') {
        this.usedRam = flow;
      }
    },
    // CPU转化
    handleCpuconver(cpuVal, cpuString) {
      let cpu = '';
      if (cpuVal >= 1000000 && cpuVal < 60000000) {
        cpu = `${this.handleToFixed(cpuVal / 1000000, 2)}s`;
      } else if (cpuVal >= 60000000) {
        cpu = `${this.handleToFixed(cpuVal / 60000000, 2)}min`;
      } else {
        cpu = `${this.handleToFixed(cpuVal / 1000, 2)}ms`;
      }
      if (cpuString === 'usedCpu') {
        this.usedCpu = cpu;
      } else if (cpuString === 'totalCpu') {
        this.totalCpu = cpu;
      }
    },

    /* 资源管理页面跳转 start */
    handleToRam() {
      this.$router.push({ name: 'ramExchange' }); // 跳转到ram交易
    },
    handleToCpu() {
      this.cpuVisible = true;
    },
    handleToNet() {
      this.netVisible = true;
    },
    /* 资源管理页面跳转 end */
    handleToFixed(num, p) {
      return toFixed(num, p);
    },

    // 将科学计数法转换为小数
    toNonExponential(num) {
      return toNonExponential(num);
      // if (num === null || isNaN(num)) return 0;
      // var m = num.toExponential().match(/\d(?:\.(\d*))?e([+-]\d+)/); // eslint-disable-line
      // return num.toFixed(Math.max(0, (m[1] || '').length - m[2]));
    },
  },
}
</script>
<style lang="scss" scoped>
$vipColor: #E7CC8E;
$bordr: #E5BC7E;
$noVipBg: #50B1E5;
$noVipColor: rgb(241, 244, 254);
.redColor {
  color: #EE1443 !important;
}

.orangeColor {
  color: #FF9800 !important;
}

.greenColor {
  color: #67C269 !important;
}

.redBack {
  background: #EE1443 !important;
}

.orangeBack {
  background: #FF9800 !important;
}

.greenBack {
  background: #67C269 !important;
}

.EosResources {
  padding: 0 !important;

  .balanceList {
    line-height: 26px;
    .cpuContent {
      display: inline-block;
      cursor: pointer;
      padding: 0 !important;
      .tag {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #67C269;
        margin-right: 6px;
      }
    }
    .cpuName {
      display: inline-block;
      width: 32px;
    }
    .surplus {
      display: inline-block;
      min-width: 110px;
      margin-left: 25px;
    }
    .jumpBtn {
      margin-left: 30px;
      color: #278EDA;
      cursor: pointer;
    }
    .inblo {
      display: inline-block;
      padding: 0 !important;
    }
  }
}
// vip会员样式
.vipContent {
  .icon-arrow-down {
    color: #fff;
  }

  .topInfo{
    background: linear-gradient(to right, #565656 , #2a2a2a) !important;
  }

  .account, .tip, .money-eos, .money-right, .jumpBtn {
    color: $vipColor !important;
  }

  .inblo {
    color: #fff;
  }

  .navside {
    &.active::before {
      background: $bordr !important;
    }

    &:hover,
    &:hover /deep/ .el-dropdown-link,
    &.active,
    &.active /deep/ .el-dropdown-link {
      color: $bordr !important;
    }
  }
}

.Influencer {
  .inblo {
    color: rgba(255, 255, 255, .8);
  }
}

.theme-1B1D27 {
  .vipContent {
    .topInfo {
      background: rgb(21, 34, 71) !important;
    }
  }
}
</style>

